<template>
  <div class="project-edit">
    <el-form :inline="true" :rules="rules" :model="formData">
      <el-row>
        <el-col :span="24">
          <el-form-item label="Name" prop="name">
            <el-input v-model="formData.name" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="Industry">
            <el-select
              placeholder="Industry of the project"
              v-model="formData.industry"
              effect="dark"
              popper-class="select-dropdown"
            >
              <el-option label="education" value="education" />
              <el-option label="internet" value="internet" />
              <el-option label="AI" value="AI" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="Stage">
            <el-select
              placeholder="project phase"
              v-model="formData.stage"
              popper-class="select-dropdown"
            >
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="Location" prop="location">
            <el-input v-model="formData.location" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="14">
        <el-col :span="14" :xs="12">
          <el-form-item label="Financing method" class="method">
            <el-select
              placeholder="Alternative financing method"
              v-model="formData.fmethod"
              popper-class="select-dropdown"
            >
              <el-option label="Equity wages" value="equity" />
              <el-option label="other" value="other" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10" :xs="12" class="method-i">
          <el-form-item prop="financeAmount">
            <el-input v-model="formData.financeAmount" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <el-form-item label="Project Picture">
            <el-upload
              drag
              :action="uploadUrl"
              multiple
              :headers="header"
              class="upload-img"
              auto-upload
              :on-success="handlePricureSuccess"
              :on-error="handlePricureError"
            >
              <el-icon color="#6D7382"><upload /></el-icon>
              <div class="el-upload__text">Upload</div>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <el-form-item label="Project file">
            <el-upload
              :headers="header"
              drag
              :action="uploadUrl"
              multiple
              class="upload-file"
              auto-upload
              :on-success="handleFileSuccess"
              :on-error="handleFileError"
            >
              <el-button>
                <el-icon color="#6D7382"><upload /></el-icon>
                Upload
              </el-button>
              <template #tip>
                <div class="el-upload__tip">
                  Supported extensions: .doc .docx .pdf .ppt .pptx .Excel...
                </div>
              </template>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <el-form-item label="Allow" prop="allow">
            <el-select
              placeholder="Which members are allowed"
              v-model="formData.allow"
              popper-class="select-dropdown"
            >
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <el-form-item label="Roadshow">
            <el-switch
              v-model="isRoadshow"
              inline-prompt
              :active-icon="Check"
              :inactive-icon="Close"
              size="large"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row v-show="isRoadshow" :gutter="14" class="road-time">
        <el-col :span="14" :xs="12">
          <el-form-item label="Set roadshow Time" class="method">
            <el-date-picker
              type="date"
              placeholder="Pick a day"
              v-model="dateRef"
            />
          </el-form-item>
        </el-col>
        <el-col :span="10" :xs="12" class="method-i">
          <el-form-item>
            <el-time-picker
              v-model="dateTimeRef"
              placeholder="Arbitrary time"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <el-form-item label="Project detail" prop="projectDe">
            <el-input type="textarea" v-model="formData.projectDe" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-button class="btn-confirm" @click="handleConfirmBtn">Confirm</el-button>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from '@/store'

import { ElMessage } from 'element-plus'
import { Check, Close } from '@element-plus/icons-vue'

import dayjs from 'dayjs'
import localCache from '@/utils/cache'

import { rules } from './config/rules'

const store = useStore()
const route = useRoute()

const dateRef = ref('')
const dateTimeRef = ref('')
const uploadUrl = 'http://116.205.237.243:8080/upload'

// 是否开启路演
const isRoadshow = ref(true)
const header = reactive({
  Authorization: localCache.getCache('token'),
})
const data = route.params

// 提交的form表单
const formData = reactive({
  name: (data.name as string) ?? '',
  industry: data.industry ?? '',
  stage: (data.stage as string) ?? '',
  location: (data.location as string) ?? '',
  fmethod: (data.fmethod as string) ?? '',
  financeAmount: (data.financeAmount as string) ?? '',
  picture: (data.picture as string) ?? '',
  file: (data.file as string) ?? '',
  allow: (data.allow as string) ?? '',
  roadTime: (data.roadTime as string) ?? '',
  projectDe: (data.projectDe as string) ?? '',
})

// 侦听路演时间
watch([dateRef, dateTimeRef], (newValue: string[]) => {
  let temp =
    dayjs(newValue[0]).format('YYYY-MM-DD') +
    dayjs(newValue[1]).format(' HH:mm:ss')
  formData.roadTime = temp
})

// 图片上传成功回调
const handlePricureSuccess = (response: any) => {
  formData.picture = response.data.url

  ElMessage({
    message: 'upload success',
    showClose: true,
    type: 'success',
  })
}

// 文件上传成功回调
const handleFileSuccess = (response: any) => {
  formData.file = response.data.url
  ElMessage({
    message: 'upload success',
    showClose: true,
    type: 'success',
  })
}
// 文件上传失败回调
const handleFileError = () => {
  ElMessage({
    message: 'upload error',
    showClose: true,
    type: 'error',
  })
}
// 图片上传失败回调
const handlePricureError = () => {
  ElMessage({
    message: 'upload error',
    showClose: true,
    type: 'error',
  })
}
const handleConfirmBtn = () => {
  // 判断是编辑还是添加
  if (data.id) {
    if (!(formData.file && formData.picture)) {
      console.log('请先上传文件!!!')
      return
    }

    store.dispatch('user/editProjectAction', {
      id: data.id,
      formData: { ...formData },
    })
  } else {
    if (!(formData.file && formData.picture)) {
      ElMessage({
        message: 'Please upload the file first',
        showClose: true,
        type: 'error',
      })
      return
    }
    store.dispatch('user/createProjectAction', {
      formData: { ...formData },
    })
  }
}
</script>

<style>
.select-dropdown {
  background-color: #1c1c24;
  box-shadow: 0 0 0 1px rgba(112, 112, 112, 0.53);
  border-color: #48484c !important;
}

.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background-color: rgba(30, 24, 24, 0.53);
}
</style>
<style scoped lang="less">
.project-edit {
  background-color: #1c1c24;
  border-radius: 20px;
  box-sizing: border-box;
  padding-top: 48px;
  padding-bottom: 44px;
  padding-right: 117px;
  text-align: center;
  padding-left: 78px;

  .method {
    :deep(.el-form-item__content) {
      align-items: stretch;
    }
  }

  .method-i {
    display: flex;
    align-items: flex-end;
    :deep(.el-form-item) {
      margin-right: 0;
    }
  }

  .upload-icon {
    font-size: 20px;
  }
  .el-upload__text {
    margin-top: -10px;
  }

  .upload-img {
    text-align: left;
    width: 100%;
  }
  .upload-file {
    width: auto;
    height: auto;
    text-align: left;
    .el-upload__tip {
      font-size: 20px;
      color: #6d7382;
    }
    :deep(.el-upload-dragger) {
      width: auto;
      height: auto;
      padding: 0;
      color: #6d7382;
      border: none;
    }
    :deep(.el-button) {
      background-color: #2c2c33;
      border: 2px solid #48484c;
      i {
        font-size: 28px;
      }
    }
    :deep(.el-button:hover) {
      color: #6d7382;
    }
  }

  .block {
    width: 100%;
    text-align: left;

    :deep(.el-date-editor) {
      width: 100%;
    }
    :deep(.el-range-separator) {
      color: #ecf5ff;
    }
  }
  .btn-confirm {
    width: 120px;
    height: 48px;
    background: #3772ff;
    border-radius: 5px;
    font-size: 20px;
    font-family: SF Pro Display;
    font-weight: 400;
    color: #fff;
    border-color: transparent;
  }
  .btn-confirm:focus,
  .btn-confirm:hover {
    border-color: #409eff;
  }
}

:deep(.el-form-item) {
  width: 100%;
  margin-bottom: 31px;
}
:deep(.el-select) {
  width: 100%;
}
:deep(.el-input) {
  width: 100%;
}
:deep(.el-input__inner) {
  background-color: transparent;
  box-shadow: 0 0 0 1px #707070;
  height: 48px;
  border-radius: 5px;
}
:deep(.el-textarea__inner) {
  background-color: transparent;
  box-shadow: 0 0 0 1px rgba(112, 112, 112, 0.53);
  height: 396px;
}

// :deep(.el-select-dropdown__item.hover) {
//   background-color: #1e1e2a;
// }

:deep(.el-upload-dragger) {
  background-color: transparent;
  border: 2px solid #48484c;
  border-radius: 5px;
  padding-top: 36px;
  box-sizing: border-box;
  width: 138px;
  height: 130px;

  i {
    font-size: 32px;
  }
}
:deep(.el-upload-list__item:hover) {
  background: rgba(255, 255, 255, 0.07);
}

:deep(.el-form-item__label-wrap) {
  margin: 0 !important;
}
:deep(.el-form-item__label) {
  width: 200px;
  font-size: 18px;
  font-family: SF Pro Display;
  font-weight: 400;
  color: #ffffff;
  text-align: left;
  &::before {
    content: '' !important;
    margin-right: 0;
  }
}

@media screen and(max-width: 1200px) {
  :deep(.wrapper__left) {
    display: none !important;
  }
  .project-edit {
    background-color: transparent;
    padding: 16px;

    .btn-confirm {
      width: 70px;
      height: 28px;
      background: #3772ff;
      font-size: 12px;
      font-family: SF Pro Display;
      font-weight: 400;
    }

    .method-i {
      display: flex;
      align-items: flex-end;
      :deep(.el-form-item) {
        margin-right: 0;
      }
    }
    .upload-file {
      .el-upload__tip {
        font-size: 12px;
      }

      :deep(.el-button) {
        width: 80px;
        height: 28px;
        i {
          font-size: 16px;
        }
        font-size: 12px;
      }
    }
  }

  :deep(.el-row) {
    width: 100%;
  }
  :deep(.el-form-item) {
    display: block;
  }
  :deep(.el-form-item__label) {
    display: block;
    font-size: 14px;
    font-family: SF Pro Display;
    font-weight: 400;
    color: #ffffff;
    text-align: left;
    margin-bottom: 8px;
    line-height: 22px;
  }

  :deep(.el-input__inner) {
    background-color: transparent;
    box-shadow: 0 0 0 1px #707070;
    height: 28px;
    border-radius: 5px;
  }

  :deep(.el-upload-dragger) {
    width: 80px;
    height: 76px;
    padding: 10px;
    box-sizing: border-box;
    i {
      font-size: 16px;
    }
    div {
      font-size: 12px;
    }
  }

  :deep(.el-textarea__inner) {
    height: 160px;
  }
  :deep(.el-form-item) {
    width: 100%;
    margin-bottom: 20px;
  }

  :deep(.el-button) {
    margin-top: 25px;
  }

  .road-time {
    :deep(.el-input__inner) {
      padding-left: 31px !important;
    }
  }
}
</style>
